<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue 3 Hello World</title>
    <!-- 引入Vue 3 -->
    <script src="vue3.js"></script>
  </head>
  <body>
    <!-- Vue应用挂载点 -->
    <div id="app">
      <h1>count1的值是：{{ count1 }}</h1>
      <button v-on:click="count1++">v-on按钮</button>
      <button @click="count1++">@按钮</button>
      <h1>count2 的值是：{{ count2 }}</h1>
      <button @click="count2++">Add</button>
    </div>

    <script>
      // 创建Vue应用
      const { createApp, ref } = Vue;

      // 定义应用
      const app = createApp({
        // 创建Vue应用实例

        setup() {
          // 组合式API的入口函数
          const count1 = ref(0); // 创建响应式数据count1，初始值为0
          const count2 = 20; // 创建普通数据count2，初始值为20
          return {
            count1, // 返回响应式数据count1
            count2, // 返回普通数据count2
          };
        },
      });

      // 挂载应用到DOM元素
      app.mount("#app");
    </script>
  </body>
</html>
